<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script type="module">

  // 普通
  function getSum(n1, n2) {
    return n1 + n2;
  }

  let res = getSum(10, 20);

  console.log(res);


  // 回调函数
  // 1. 耗时的操作  ajax 定时器 I/O 读取 写入
  function getXhrResult(n1, n2, fn) {
    // 耗时的过程
    setTimeout(() => fn(n1 + n2), 1000);
  }

  getXhrResult(20, 40, (result) => console.log(result))

</script>

<script type="module">
  import {request1, request2} from './javascripts/request.js';

  // request1('/list', function (res) {
  //   console.log(res);
  //   // 第二个请求的参数
  //   request('/axxx',res,function (re) {
  //     request('/xxx',re,function () {
  //       //回调地狱
  //     })
  //   })
  // });
  // 用户体验奇差
  // 不好维护

  // }) 就是回调地狱

  // 怎么解决 链式调用的方式 拍平 / 扁平化  java : 建造者模式
  // promise.then(res=>request('/',res)).then(res=>console.log())

  // es6 提案中  拍平的方式
  request2('/list').then(res => request2('/getById')).then(res => console.log(res));


  //终极的解决方案  es7
  async function getRequest() {
    let res1 = await request2('/list');
    console.log(res1);

    let res2 = await request2('/getById');
    console.log(res2);
  }

  getRequest();

</script>

<script type="module">

  import {request3} from "./javascripts/request.js";

  let myp = request3('/list');
  myp.then(res => console.log(res),err=>{});
</script>

<script type="module">
  import MyPromise from './javascripts/MyPromise.js';

  function getRes() {
    return new MyPromise((resolve,reject)=>{
     setTimeout(()=>{
       resolve('你好 2003A');
     },1000)
    })
  }

  getRes().then(res => console.log(res)).then(res => console.log(res));

</script>


</body>
</html>
